<template>
  <div class="dropdown">
    <button class="dropbtn" @click="toggleDropdown">
      {{ selectedOption ? selectedOption.label : placeholder }}
      <span class="caret">&#9662;</span>
    </button>
    <div v-if="isOpen" class="dropdown-content">
      <a
        v-for="option in options"
        :key="option.value"
        @click="selectOption(option)"
        href="#"
      >
        {{ option.label }}
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dropdown",
  props: {
    options: {
      type: Array,
      required: true,
    },
    placeholder: {
      type: String,
      default: "Select an option",
    },
  },
  data() {
    return {
      isOpen: false,
      selectedOption: null,
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    selectOption(option) {
      this.selectedOption = option;
      this.isOpen = false;
      // Emit an event to the parent component
      this.$emit("update:selected", option);
    },
  },
};
</script>

<style scoped>
/* Add your own styles here */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #fff;
  color: #333;
  padding: 0px 6px;
  margin: 0 5px;
  font-size: 12px;
  border-color: #f1f1f1;
}

.dropdown-content {
  display: block;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 11px;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}
.caret {
  margin-left: 5px;
}
</style>
